<template>
  <div class="content_box">
    <div class="list_box" v-if="list.length">
      <div class="box" v-for="(item,index) in list" :key="index">
        <div class="list">
          <p class="title">姓名</p>
          <p class="text">{{item.contacts}}</p>
        </div>
        <div class="list">
          <p class="title">手机号码</p>
          <p class="text on" @click="callPhone(item.mobile)">{{item.mobile}}</p>
        </div>
        <div class="list">
          <p class="title">登录账号</p>
          <p class="text">{{item.loginName}}</p>
        </div>
        <div class="list">
          <p class="title">登录密码</p>
          <p class="text">{{item.plaintext}}</p>
        </div>
        <p class="del" @click="del(item)">
          <van-icon style="margin-right:6rpx;" size="16px" name="delete-o" />
          删除
        </p>
      </div>
      
    </div>
    <div class="no_data" v-else>
      <img src="/static/images/no_sp.png" alt="">
      <p class="text">暂无员工</p>
    </div>

    <div class="anniu_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
        <p class="anniu" @click="toAdd"><van-icon name="plus" />添加员工</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getStoreUserList,
  delStoreUser
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      isIphoneXnum:0,
      storeId:'',
      list:[]
    };
  },
  onShow() {
    this.getList()
  },

  methods: {

    // 获取员工列表
    getList(){
      this.$showLoading("加载中...")
      getStoreUserList({role:'da_sao',storeId:this.storeId}).then(res=>{
        if(res.statusCode == '00000'){
          this.list = res.data
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          this.$toast(res.message)
        }
      })
    },

    // 跳转新增合伙人
    toAdd(){
      wx.navigateTo({
        url: `/pages/home/userAddAdmin/add/main?storeId=${this.storeId}`,
      });
    },

    // 删除员工
    del(item){
      wx.showModal({
        title: '温馨提示',
        content: '确定删除该员工？',
        success: (result) => {
          const { confirm } = result
          if (confirm) {
            this.$showLoading("删除中...")
            delStoreUser({id:item.id}).then(res=>{
              if(res.statusCode == '00000'){
                this.getList()
                this.$toast('删除成功')
                wx.hideLoading()
              }else{
                this.$toast(res.message)
                wx.hideLoading()
              }
            })
          }
        }
      })
    },

    // 客服电话
    callPhone(tell) {
      wx.makePhoneCall({
        phoneNumber: tell //仅为示例，并非真实的电话号码
      })
    },
    
  },
  onLoad(options) {
    this.storeId = options.storeId
    console.log(options)
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.getList()
  },
  // 上拉加载
  onReachBottom(){
    console.log('到底了')
    this.getList()
  },
  onHide() {},

  onUnload() {},
};
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;
  background: #F8F9FA;
  padding-top:30rpx;
}
.list_box{
  width: 92%;
  margin:0 auto;
  .box{
    padding:30rpx;
    background: #fff;
    border-radius: 8rpx;
    margin-bottom:30rpx;
    .ht{
      margin-bottom:20rpx;
      .title{
        font-size:28rpx;
        margin-bottom:20rpx;
      }
      .img_list{
        img{
          width: 100rpx;
          height: 100rpx;
          margin-right:16rpx;
          &:last-child{
            margin-right:0;
          }
        }
      }
    }
    .list{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size:28rpx;
      margin-bottom:20rpx;
      &:last-child{
        margin-bottom:0;
      }
      .on{
        color:#1E68FF;
      }
    }
    .del{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size:26rpx;
      width: 130rpx;
      height: 50rpx;
      border-radius: 50rpx;
      background: #f5f5f5;
      margin-left:auto;
    }
  }
}
.anniu_box{
  height: 150rpx;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom:0;
  left: 0;
  .box{
    width: 92%;
    height: 150rpx;
    line-height: 150rpx;
    padding:0 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    .anniu{
      box-shadow: 0rpx 10rpx 20rpx #CEDBFA;
      border:none;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #1E68FF;
      border-radius: 100rpx;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
    }
  }
}
.no_data{
  text-align: center;
  font-size:28rpx;
  color:#333;
  padding-top:150rpx;
  .text{
    font-weight: 500;
    color:#999;
  }
  img{
    width: 248rpx;
    height: 248rpx;
  }
}
</style>
